﻿<div id="pnItems" class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <span class="glyphicon glyphicon-th-large"></span>&nbsp;&nbsp;
            <a data-toggle="collapse" href="javascript:#collapseItems">{{strings.Items}}</a>
        </h4>
    </div>
    <div id="collapseItems" class="panel-body collapse in">
        <div ng-hide="data.Messages.length == 0">
            {{data.Messages[0].MessageDetail}}
        </div>
        <div ng-hide="tblResult.ListData.length == 0" class="col-width" ng-repeat="item in tblResult.ListData" cts-repeat-loaded="itemsLoaded">
            <span class="thumbnail">
                <img class="lightbox" href="{{item.ItemImage}}_full" ng-src='{{item.ItemImage}}_normal' alt='{{item.ItemName}}' ui-jq="tooltip" title='{{strings.ShowLargeImage}}' />
                <div class="caption">
                    <h5><a href="{{item.Link}}">{{item.ItemName}}</a></h5>
                </div>
            </span>
        </div>
    </div>
</div>
<pagination
    boundary-links="true"
    total-items="tblResult.Total"
    items-per-page="tblResult.Limit"
    ng-model="tblResult.Page"
    ng-change="filter()">
</pagination>

